<template>
  <div class="container">
    <div class="header">
      <h1 class="text-center mb-4">帮助中心</h1>
      <p class="text-center text-muted">在这里您可以找到常见问题的解答和使用指南</p>
    </div>

    <div class="search-section mb-5">
      <div class="input-group input-group-lg">
        <span class="input-group-text bg-white border-end-0">
          <i class="bi bi-search"></i>
        </span>
        <input 
          type="text" 
          class="form-control border-start-0" 
          placeholder="搜索帮助内容..." 
          v-model="searchQuery"
          @keyup.enter="searchHelp"
        >
        <button class="btn btn-primary" @click="searchHelp">
          <i class="bi bi-search me-2"></i>搜索
        </button>
      </div>
    </div>

    <div class="row">
      <!-- 左侧分类导航 -->
      <div class="col-lg-3 mb-4">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-white py-3">
            <h5 class="mb-0">帮助分类</h5>
          </div>
          <div class="list-group list-group-flush">
            <button 
              v-for="category in categories" 
              :key="category.id"
              class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              :class="{ active: selectedCategory === category.id }"
              @click="selectCategory(category.id)"
            >
              <span>
                <i :class="category.icon" class="me-2"></i>
                {{ category.name }}
              </span>
              <span class="badge bg-secondary rounded-pill">{{ category.count }}</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="col-lg-9">
        <div v-if="searchQuery && filteredArticles.length === 0" class="card border-0 shadow-sm">
          <div class="card-body text-center py-5">
            <i class="bi bi-search text-muted" style="font-size: 3rem;"></i>
            <h4 class="mt-3">未找到相关帮助内容</h4>
            <p class="text-muted">尝试使用其他关键词搜索，或浏览下方的常见问题</p>
          </div>
        </div>

        <div v-else-if="searchQuery" class="card border-0 shadow-sm">
          <div class="card-header bg-white py-3">
            <h5 class="mb-0">搜索结果</h5>
          </div>
          <div class="list-group list-group-flush">
            <div 
              v-for="article in filteredArticles" 
              :key="article.id"
              class="list-group-item list-group-item-action"
              @click="openArticle(article)"
            >
              <div class="d-flex w-100 justify-content-between">
                <h6 class="mb-1">{{ article.title }}</h6>
                <small class="text-muted">{{ getCategoryName(article.categoryId) }}</small>
              </div>
              <p class="mb-1 text-muted">{{ article.summary }}</p>
            </div>
          </div>
        </div>

        <div v-else>
          <div class="d-flex justify-content-between align-items-center mb-4">
            <h4>{{ currentCategoryName }}常见问题</h4>
            <span class="text-muted">{{ currentCategoryArticles.length }} 个问题</span>
          </div>

          <div class="accordion" id="helpAccordion">
            <div 
              v-for="(article, index) in currentCategoryArticles" 
              :key="article.id"
              class="accordion-item border-0 shadow-sm mb-3 rounded-3"
            >
              <h2 class="accordion-header" :id="`heading${index}`">
                <button 
                  class="accordion-button collapsed bg-white rounded-3" 
                  type="button" 
                  data-bs-toggle="collapse" 
                  :data-bs-target="`#collapse${index}`"
                  :aria-expanded="false"
                  :aria-controls="`collapse${index}`"
                >
                  {{ article.title }}
                </button>
              </h2>
              <div 
                :id="`collapse${index}`" 
                class="accordion-collapse collapse" 
                :aria-labelledby="`heading${index}`" 
                data-bs-parent="#helpAccordion"
              >
                <div class="accordion-body bg-white rounded-bottom-3">
                  <div v-html="article.content"></div>
                  <div class="mt-3 pt-3 border-top">
                    <small class="text-muted">
                      <i class="bi bi-clock me-1"></i> 最后更新: {{ article.updatedAt }}
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系客服 -->
        <div class="card border-0 shadow-sm mt-5">
          <div class="card-body text-center py-5">
            <i class="bi bi-headset text-primary" style="font-size: 3rem;"></i>
            <h4 class="mt-3">仍未解决问题？</h4>
            <p class="text-muted">我们的客服团队随时为您服务</p>
            <div class="d-flex justify-content-center gap-3">
              <button class="btn btn-primary">
                <i class="bi bi-chat-dots me-2"></i>在线客服
              </button>
              <button class="btn btn-outline-primary">
                <i class="bi bi-envelope me-2"></i>发送邮件
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 帮助文章详情模态框 -->
  <div class="modal fade" id="articleModal" tabindex="-1" aria-labelledby="articleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="articleModalLabel">{{ selectedArticle.title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div v-html="selectedArticle.content"></div>
        </div>
        <div class="modal-footer">
          <small class="text-muted me-auto">
            <i class="bi bi-clock me-1"></i> 最后更新: {{ selectedArticle.updatedAt }}
          </small>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索关键词
const searchQuery = ref('')

// 选中的分类
const selectedCategory = ref('all')

// 选中的文章
const selectedArticle = ref({
  title: '',
  content: '',
  updatedAt: ''
})

// 分类数据
const categories = ref([
  { id: 'all', name: '全部', icon: 'bi bi-grid', count: 6 },
  { id: 'account', name: '账号管理', icon: 'bi bi-person', count: 2 },
  { id: 'posts', name: '发布内容', icon: 'bi bi-card-text', count: 1 },
  { id: 'transactions', name: '交易相关', icon: 'bi bi-currency-dollar', count: 2 },
  { id: 'verification', name: '学生认证', icon: 'bi bi-shield-check', count: 1 },
  { id: 'technical', name: '技术问题', icon: 'bi bi-bug', count: 0 }
])

// 帮助文章数据
const articles = ref([
  {
    id: 1,
    title: '如何注册账号？',
    summary: '了解如何注册并创建您的校园服务账号',
    content: `
      <p>注册账号非常简单，请按照以下步骤操作：</p>
      <ol>
        <li>点击首页右上角的"注册"按钮</li>
        <li>填写您的手机号码并获取验证码</li>
        <li>设置您的登录密码</li>
        <li>完善个人信息，包括昵称和学号</li>
        <li>完成邮箱验证（可选但推荐）</li>
      </ol>
      <p class="mt-3">注册完成后，您就可以使用校园服务的所有功能了。</p>
    `,
    categoryId: 'account',
    updatedAt: '2025-10-01'
  },
  {
    id: 2,
    title: '如何进行学生认证？',
    summary: '完成学生认证以解锁更多功能',
    content: `
      <p>学生认证是使用我们平台部分高级功能的必要步骤：</p>
      <ol>
        <li>进入"个人设置"页面</li>
        <li>点击"学生认证"选项</li>
        <li>上传您的学生证照片</li>
        <li>填写学号和姓名信息</li>
        <li>提交审核，等待系统确认</li>
      </ol>
      <div class="alert alert-info mt-3">
        <i class="bi bi-info-circle me-2"></i>
        认证通常在1个工作日内完成，认证成功后您将收到系统通知。
      </div>
    `,
    categoryId: 'verification',
    updatedAt: '2025-10-05'
  },
  {
    id: 3,
    title: '如何发布二手商品？',
    summary: '在二手市场发布您的商品信息',
    content: `
      <p>发布二手商品的步骤如下：</p>
      <ol>
        <li>登录后点击导航栏中的"发布"按钮</li>
        <li>选择"二手商品"类别</li>
        <li>填写商品标题、描述和价格</li>
        <li>上传商品图片（最多3张）</li>
        <li>选择商品分类和新旧程度</li>
        <li>确认信息无误后点击"发布"</li>
      </ol>
      <div class="alert alert-warning mt-3">
        <i class="bi bi-exclamation-triangle me-2"></i>
        请确保商品描述真实准确，避免发布违禁物品。
      </div>
    `,
    categoryId: 'posts',
    updatedAt: '2025-10-10'
  },
  {
    id: 4,
    title: '如何购买二手商品？',
    summary: '在二手市场购买心仪的商品',
    content: `
      <p>购买二手商品的操作流程：</p>
      <ol>
        <li>在二手市场浏览或搜索商品</li>
        <li>点击商品查看详细信息</li>
        <li>与卖家联系了解更多信息</li>
        <li>协商交易方式和地点</li>
        <li>线下完成交易后记得确认收货</li>
      </ol>
      <div class="alert alert-success mt-3">
        <i class="bi bi-shield-lock me-2"></i>
        建议选择校园内安全的公共场所进行交易，并在交易完成后及时确认。
      </div>
    `,
    categoryId: 'transactions',
    updatedAt: '2025-10-12'
  },
  {
    id: 5,
    title: '忘记密码怎么办？',
    summary: '找回或重置您的登录密码',
    content: `
      <p>如果您忘记了登录密码，可以通过以下方式重置：</p>
      <ol>
        <li>在登录页面点击"忘记密码"</li>
        <li>输入您的手机号码</li>
        <li>获取短信验证码</li>
        <li>设置新的登录密码</li>
        <li>使用新密码登录</li>
      </ol>
      <p class="mt-3">如果无法通过手机找回密码，请联系客服寻求帮助。</p>
    `,
    categoryId: 'account',
    updatedAt: '2025-09-28'
  },
  {
    id: 6,
    title: '如何联系卖家？',
    summary: '与商品卖家取得联系的方法',
    content: `
      <p>您可以使用以下方式联系卖家：</p>
      <ul>
        <li><strong>站内信：</strong>在商品页面点击"联系卖家"按钮发送站内消息</li>
        <li><strong>手机号：</strong>如果卖家公开了手机号，可直接拨打电话</li>
        <li><strong>在线聊天：</strong>通过平台的实时聊天功能与卖家沟通</li>
      </ul>
      <div class="alert alert-info mt-3">
        <i class="bi bi-chat-square-text me-2"></i>
        为了您的安全，请勿在平台外透露个人隐私信息。
      </div>
    `,
    categoryId: 'transactions',
    updatedAt: '2025-10-08'
  }
])

// 当前分类名称
const currentCategoryName = computed(() => {
  if (selectedCategory.value === 'all') return '全部'
  const category = categories.value.find(cat => cat.id === selectedCategory.value)
  return category ? category.name : '全部'
})

// 当前分类下的文章
const currentCategoryArticles = computed(() => {
  if (selectedCategory.value === 'all') {
    return articles.value
  }
  return articles.value.filter(article => article.categoryId === selectedCategory.value)
})

// 搜索过滤后的文章
const filteredArticles = computed(() => {
  if (!searchQuery.value) return []
  const query = searchQuery.value.toLowerCase()
  return articles.value.filter(article => 
    article.title.toLowerCase().includes(query) || 
    article.summary.toLowerCase().includes(query) ||
    article.content.toLowerCase().includes(query)
  )
})

// 搜索帮助内容
const searchHelp = () => {
  // 搜索逻辑已在 computed 中实现
}

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
  searchQuery.value = ''
}

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(cat => cat.id === categoryId)
  return category ? category.name : ''
}

// 打开文章详情
const openArticle = (article) => {
  selectedArticle.value = { ...article }
  // 在实际应用中，这里会打开模态框显示文章详情
  // 由于我们使用了 Bootstrap 模态框，需要确保 Bootstrap JS 已加载
  const modal = new window.bootstrap.Modal(document.getElementById('articleModal'))
  modal.show()
}
</script>

<style scoped>
.header h1 {
  font-weight: 700;
  color: #3498db;
}

.search-section .input-group {
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.search-section .form-control,
.search-section .input-group-text {
  border: none;
  padding: 15px 20px;
}

.search-section .btn {
  border: none;
  padding: 10px 30px;
  border-radius: 0 50px 50px 0;
}

.list-group-item {
  border: none;
  border-radius: 8px !important;
  margin: 5px 10px;
  transition: all 0.3s;
}

.list-group-item:hover,
.list-group-item.active {
  background-color: #3498db;
  color: white;
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
}

.accordion-button:not(.collapsed) {
  background-color: #f8f9fa;
  color: #3498db;
  font-weight: 500;
}

.accordion-button::after {
  content: none;
}

.accordion-button:not(.collapsed)::after {
  content: none;
}

.accordion-button::before {
  content: "+";
  font-size: 1.5rem;
  margin-right: 15px;
  color: #3498db;
}

.accordion-button:not(.collapsed)::before {
  content: "-";
}

.card {
  border-radius: 15px;
  overflow: hidden;
}

.btn-primary {
  background-color: #3498db;
  border-color: #3498db;
  border-radius: 50px;
  padding: 10px 25px;
}

.btn-outline-primary {
  border-radius: 50px;
  padding: 10px 25px;
}
</style>
